Static Site

Why

There are many problems with cms some due to security others dues to infrastructure dependency, database or running a server. Allows us to separate layout from content. Produces HTML which is easy to host and share.

Dynamic vs static

Static Site

A static site is one that does not change once the content is set.

  • plain old html site
  • redbrick

Dynamic Site

A dynamic is one that is generated everytime you load it.

  • wordpress
  • facebook
  • twitter

Hugo

Written in go, so runs on anything. Uses markdown and yaml to store setting and contents.

Using Hugo

Hugo is already installed on pygmalion, so everyone just needs to ssh there to use it

ssh username@pygmalion.redbrick.dcu.ie

Creating your first site

To generate your first site you can type the command:

hugo new site ~/my-website

Jump into your new site and have a look around at the files

cd ~/my-website
ls -F

Open up the config.yaml file to change the configuration of your website

nano config.yaml

Edit the content/index.md with what ever you want to say

nano content/index.md

Making it your own

Changing images

To get started you will want to add your own pictures for your avatar, banner and about photos.

To change these you will need to add these to your /static/img/ folder.

  • avatar.jpg
  • banner.jpg
  • about.jpg

Customising pages

  • Change the baseURL baseURL: "http://username.redbrick.dcu.ie/" to include your username
  • Change title: A Redbrick users site to the title of your main page
  • You can also add your social media links in here after link: '#'

Adding new pages

hugo new about.md

This will generate a new page with some metadata all ready in it.

Take a look at this new file with

nano content/about.md

Building the Site

To build your site we type the command

hugo

This will output all the code into the public folder.

To publish it to redbrick

mv public/* ~/public_html
cd ~/public_html
chmod -R 755 *
chmod -r 644 *.html *.css *.html *.jpg *.png

Why is my static site really slow to load?

Images

Don't use high-res scale them down and compress them

  • thumbnails 200px
  • banners 800px (These are rough estimates every page is different)

Compression removes details but makes them smaller

Minification

Minification removes white spaces reducing the size of the file allowing you to load your site faster. You can minify html, css, or js.

Tools for minification:

  • Gulp
  • Grunt
  • Webpack

Blog

hugo can be used for a blog.

Youll need a theme that supports blog posts.

Just run hugo new post/my-post-name.md

Questions?